<template>
    <view class="feedback-con">
        <header-vue :back="true" title="意见反馈" titleSize="32rpx" titleColor="#333">
            <template v-slot:btnLt>
                <view class="btn-lt" @click="gotoUrl('/views/index/history-feedback')">
                    <u-icon name="clock" color="#999" size="25rpx"></u-icon>
                    <text class="txt">历史反馈</text>
                </view>
            </template>
        </header-vue>

        <!-- 内容区域 -->
        <view class="scroll-area">
            <!-- 反馈内容 -->
            <view class="card">
                <view class="card-title">
                    <u-image :src="IMAGE_URL + '/static/mine/title-icon.png'" width="33rpx" height="24rpx" mode="aspectFill"></u-image>
                    <text class="tit">反馈内容</text>
                </view>
                <view class="card-body">
                    <u--textarea class="textarea" v-model="form.content" height="220rpx"
                        placeholder="请输入您的问题..." />

                        <view class="uploader">
                            <view class="thumb" v-for="(img, idx) in images" :key="img.id">
                                <image :src="img.path" mode="aspectFill" class="thumb-img"></image>
                                <view class="thumb-del" @click="removeImage(idx)">×</view>
                            </view>
                            <view class="add-tile" v-if="images.length < maxImages" @click="chooseImage">
                                <view class="camera-icon">
                                    <u-icon name="camera" size="30" color="#666"></u-icon>
                                </view>
                                <text class="add-text">上传照片</text>
                            </view>
                        </view>
                </view>
            </view>

            <!-- 联系方式 -->
            <view class="phone-card">
                <view class="card-title">
                    <u-image :src="IMAGE_URL + '/static/mine/title-icon.png'" width="33rpx" height="24rpx" mode="aspectFill"></u-image>
                    <text class="tit">联系方式</text>
                </view>
                <view class="card-body">
                    <u--input v-model="form.contact" clearable placeholder="请输入手机号" />
                </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-wrap" @click="submit">
                <text>提交反馈</text>
            </view>
            <u-safe-bottom></u-safe-bottom>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import { postUploadNow } from '@/api/index.js'
import appConfig from '@/config/app.js'
export default {
    components: {
        headerVue,
    },
    data() {
        return {
            form: {
                content: '',
                contact: ''
            },
            images: [],
            maxImages: 9,
            IMAGE_URL: appConfig.IMAGE_URL,
        }
    },
    methods: {
        gotoUrl(url){
            uni.navigateTo({url: url})
        },
        chooseImage() {
            const remaining = this.maxImages - this.images.length
            if (remaining <= 0) return
            const that = this
            uni.chooseImage({
                count: remaining,
                sizeType: ['compressed'],
                sourceType: ['album','camera'],
                success(res) {
                    const files = (res.tempFiles || [])
                    files.forEach((item) => {
                        that.images.push(item)
                    })
                }
            })
        },
        removeImage(index) {
            this.images.splice(index, 1)
        },
        async submit() {
            if (!this.form.content) return uni.showToast({ title: '请填写反馈内容', icon: 'none' })
            if (!this.form.contact) return uni.showToast({ title: '请输入联系方式', icon: 'none' })
            uni.showLoading({ title: '提交中...' })
            try {
                const uploadedUrls = []
                for (const item of this.images) {
                    try {
                        const res = await postUploadNow(item.path)
                        const data = JSON.parse(res.data)
                        if (data.errno == 0 && data.url) {
                            uploadedUrls.push(data.url)
                        }
                    } catch (e) {
                        // ignore single file failure
                    }
                }
                // TODO: 调用反馈提交接口，如无则先仅提示成功
                uni.hideLoading()
                uni.showToast({ title: '提交成功', icon: 'success' })
                this.form.content = ''
                this.form.contact = ''
                this.images = []
            } catch (err) {
                uni.hideLoading()
                uni.showToast({ title: '提交失败', icon: 'none' })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.feedback-con {
    width: 100%;
    min-height: 100vh;
    background: #F6F6F6;
}

.btn-lt {
    display: flex;
    align-items: center;
    color: #999;

    .txt {
        font-size: 24rpx;
        margin-left: 4rpx;
    }
}

.scroll-area {
    height: calc(100% - 88rpx);
    padding: 24rpx;
    box-sizing: border-box;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 24rpx;
    padding-bottom: 48rpx;
}

.card-title {
    display: flex;
    align-items: center;
    padding: 20rpx 28rpx 0;
    font-size: 30rpx;
    color: #333;
    font-weight: 600;

    .tit {
        margin-left: 8rpx;
    }
}

.card-body {
    margin: 26rpx 28rpx;
    background: #FAFAFA;
    border-radius: 12rpx 12rpx 12rpx 12rpx;

    .textarea {
        background: transparent;
    }
}


.phone-card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .card-body {
        background: transparent;
        margin: 30rpx 20rpx 22rpx;
    }
}

.upload-wrap {
    padding: 20rpx;
}

.upload-btn {
    width: 124rpx;
    height: 140rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #333;

    .iconfont {
        font-size: 20rpx;
        color: #333;
        margin-bottom: 8rpx;
    }
}

.submit-wrap {
    height: 80rpx;
    border-radius: 80rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: #FFFFFF;
    margin-top: 100rpx;
}

/* 图片上传样式，与发布动态一致 */
.uploader {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.thumb {
    position: relative;
    width: 120rpx;
    height: 140rpx;
    border-radius: 4rpx;
    overflow: hidden;
    margin-right: 25rpx;
    margin-bottom: 20rpx;
}
.thumb:nth-child(4n) {
    margin-right: 0;
}
.thumb-img {
    width: 100%;
    height: 100%;
    display: block;
}
.thumb-del {
    position: absolute;
    right: 6rpx;
    top: 6rpx;
    width: 20rpx;
    height: 20rpx;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-tile {
    width: 120rpx;
    height: 140rpx;
    border-radius: 4rpx;
    background: #F8F8F8;
    border: 2rpx dashed #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    margin-bottom: 20rpx;
}
.camera-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12rpx;
}
.add-text {
    font-size: 24rpx;
    color: #999;
}
</style>